<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
            list-style: none;
        }
        .box{
            width: 800px;
            margin:100px auto;
        }
        input{
            width: 500px;
            height: 40px;
            font:16px/40px "sunsim";
            color:#666;
        }
        button{
            width: 80px;
            height: 43px;
            margin:0 10px;
            font:16px/43px "microsoft yahei";
            color:#000;
            vertical-align:top;
        }
        ul{
            width: 500px;
        }
        li{
            width: 490px;
            height: 40px;
            margin:5px;
            padding:5px;
            color:#fff;
            border-radius:10px;
            font:16px/40px "microsoft yahei";
            background-color:lightcoral;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text"><button>生成留言</button><button>批量删除</button>
    <ul></ul>
</div>
<script>
    var Oul=document.getElementsByTagName("ul")[0];
    var inp=document.getElementsByTagName("input")[0];
    var btn=document.getElementsByTagName("button");
    var links=document.getElementsByTagName("li");
    btn[0].onclick=function(){
        var str=inp.value;
        if(str){
            var newLi=document.createElement("li");
            newLi.innerHTML=str;
            Oul.children[0]?Oul.insertBefore(newLi,Oul.children[0]):Oul.appendChild(newLi);
        }else{
            alert("输入内容不能为空！！！！");
        }
        inp.value="";
        if(links.length>5){
            Oul.removeChild(links[links.length-1]);
        }
        for(var i=0;i<links.length;i++){
            links[i].index=0;
            links[i].onclick=function(){
                this.index++;
                if(this.index%2){
                    this.style.backgroundColor="lightblue";
                    this.color="#FF6E45";
                }else{
                    this.style.backgroundColor="lightcoral";
                    this.color="#fff";
                }
            }
          }
        }
        btn[1].onclick=function(){
        for(var j=0;j<links.length;j++){
            if(links[j].index%2){
                Oul.removeChild(links[j]);
                j--;
            }
        }
        }
</script>
</body>
</html>